<template>
  <div class="page-container">
    <div class="recharge-tip">
      充电结束后余额将自动退回，充值后未进行充电，预计将在1个工作日内退款到账
    </div>

    <div class="recharge-list-wrap flex">
      <p
        :class="[
          'recharge-item text-center',
          { active: payParams.Money === item.money },
        ]"
        v-for="item in rechargeList"
        :key="item.id"
        @click="chooseMoney(item)"
      >
        {{ item.name }}
      </p>
    </div>

    <div class="pay-wrap text-center">
      <p class="flex flex-align flex-justify">
        <img src="./we-pay.png" alt="" class="we-pay-img" />
        <span>微信支付</span>
      </p>
      <button class="pay-btn text-center" @click="payNow">立即支付</button>
    </div>

    <!-- loading -->
    <div class="loading-container" v-if="isSubmiting">
      <div class="loading-wrap text-center">
        <img src="./loading.png" alt="" class="loading-img text-center" />
        <p>支付中,请等待...</p>
      </div>
    </div>

    <!-- toast -->
    <div class="toast-container" v-if="isShowToast">
      支付失败，请稍后再试支付失败，请稍后再试支付失败，请稍后再试
    </div>

    <div class="success-dialog" v-if="isSuccess">
      <div class="success-content flex flex-align">
        <p class="success-tip">支付成功</p>
        <p class="success-money">￥30.00</p>
        <p>关闭当前页，开启扫码充电吧！</p>
        <p class="success-btn text-center" @click="confirmSuccess">确定</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rechargeList: [
        {
          name: "￥1",
          money: 1,
        },
        {
          name: "￥2",
          money: 2,
        },
      ],
      chooseMoneyObj: {
        money: null,
        name: "",
      },
      isShowToast: false, // 是否显示toast
      isSubmiting: false, // 支付中。。。
      isSuccess: false, // 支付成功弹窗

      // 支付需要的参数
      payParams: {
        UserId: "",
        EmpId: "",
        Money: "",
        PayType: 5, // 默认5
        ClientID: "", // 电享 写死
        PlatInfo: "",
      },
    };
  },
  mounted() {
    // empid=710937180&preorderid=1247765568401088514&plattype=5&userid=22222
    const preorderid = this.getQuery("preorderid"),
      EmpId = this.getQuery("empid"),
      plattype = this.getQuery("plattype"),
      UserId = this.getQuery("userid");
    this.payParams = {
      ...this.payParams,
      UserId,
      EmpId,
      PayType: 5,
      ClientID: "",
      PlatInfo: "",
    };
    console.log(this.payParams);
  },
  methods: {
    chooseMoney(item) {
      // this.chooseMoneyObj = item;
      this.payParams.Money = item.money;
    },
    payNow() {
      // console.log(this.getQuery('aaa'))
      // console.log(this.chooseMoneyObj)
      // this.isSubmiting = !this.isSubmiting;
      // this.isSuccess = !this.isShowToast;
      const body = {
        appid: "", // 公众账号ID
        mch_id: "", // 商户号
        nonce_str: "", // 随机字符串，不长于32位
        sign: "", // 签名
        body: "", // 商品简单描述，该字段须严格按照规范传递
        out_trade_no: "", // 商户系统内部的订单号,32个字符内、可包含字母
        total_fee: "", // 订单总金额，单位为分
        spbill_create_ip: "", // 必须传正确的用户端IP,支持ipv4、ipv6格式，获取方式详见获取用户ip指引
        notify_url: "", // 接收微信支付异步通知回调地址，通知url必须为直接可访问的url，不能携带参数
        trade_type: "", // 交易类型   H5支付的交易类型为MWEB
        scene_info: "", // 上报支付的场景信息,针对H5支付有以下三种场景,请根据对应场景上报,H5支付不建议在APP端使用，针对场景1，2请接入APP支付，不然可能会出现兼容性问题
      };
      this.ajaxEvt({
        // url: 'https://api.mch.weixin.qq.com/pay/unifiedorder',
        url: "http://192.168.10.244:15200/cec/v1/create_recharge_order",
        method: "POST",
        body: this.payParams,
      });
    },
    confirmSuccess() {
      this.chooseMoneyObj = {};
      this.isSuccess = false;
    },
    getQuery(variable) {
      var query = window.location.search.substring(1);
      var vars = query.split("&");
      for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] == variable) {
          return pair[1];
        }
      }
      return false;
    },
    ajaxEvt({ url, method, body, headers }) {
      return new Promise((resolve, reject) => {
        const request = new XMLHttpRequest();
        //初始化请求
        request.open(method, url);

        for (const key in headers) {
          request.setRequestHeader(key, headers[key]);
        }
        // request.setRequestHeader("content-type","application/x-www-form-urlencoded");

        request.send(body);

        request.onreadystatechange = () => {
          if (request.readyState === 4) {
            if (request.status >= 200 && request.status < 300) {
              // successFn 就由 resove 代替了
              resolve(request.responseText);
            } else if (request.status >= 400) {
              // failFn 就由 reject 代替了
              reject(request);
            }
          }
        };
      });
    },
  },
  watch: {
    isShowToast(val) {
      if (val) {
        setTimeout(() => {
          this.isShowToast = false;
        }, 3000);
      }
    },
  },
};
</script>

<style>
body,
html {
  height: 100vh;
  min-height: 100%;
  font-size: 0.14rem;
}

body,
html,
div,
p,
input,
span,
section,
button,
img {
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  font-family: "微软雅黑";
}

.flex {
  display: flex;
  display: -webkit-flex;
}

.flex-align {
  align-items: center;
}

.flex-justify {
  justify-content: center;
}

.text-center {
  text-align: center;
}

#root {
  height: 100%;
}

.page-container {
  height: 100%;
  padding: 16px 16px;
  overflow-x: hidden;
  position: relative;
}

.recharge-tip {
  font-size: 0.16rem;
}

.recharge-list-wrap {
  /* width: 90%; */
  max-height: 4rem;
  overflow-y: auto;
  flex-wrap: wrap;
  margin: 0.4rem auto;
}

.recharge-item {
  /* width: 1rem; */
  width: 29.5%;
  padding: 0.14rem 0;
  margin: 5px 5px;
  font-size: 0.14rem;
  border-radius: 0.05rem;
  color: #333333;
  font-weight: bold;
  border: 1px solid #ddd;
}

.recharge-item:nth-child(3n) {
  margin-right: 0;
}

.recharge-item.active {
  color: #00d18b;
  border-color: #00d18b;
}

.pay-wrap {
  width: 60%;
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  font-size: 0.14rem;
}

.we-pay-img {
  width: 0.16rem;
  height: 0.16rem;
  margin-right: 0.05rem;
}

.pay-btn {
  width: 100%;
  padding: 11px 0;
  color: #fff;
  background: #00d18b;
  border-radius: 99px;
  box-shadow: 0px 2px 8px 0px rgba(0, 209, 139, 0.4);
  margin: 15px auto;
}

.pay-btn:active {
  background: #00b87a;
  color: #fff;
}

.pay-btn[disabled] {
  background: #ccc;
  box-shadow: none;
  color: #999;
}

.loading-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.1);
  z-index: 999;
}

.loading-wrap {
  width: 1.6rem;
  margin: 2rem auto 0;
  padding: 11px 15px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 6px;
}

.loading-img {
  width: 0.64rem;
  height: 0.64rem;
  transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  animation: loadingAni 1s infinite linear;
}

.toast-container {
  max-width: 90%;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  padding: 10px 15px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 6px;
  z-index: 99;
}

.success-dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.1);
  z-index: 100;
}

.success-content {
  width: 2.4rem;
  margin: 2rem auto 0;
  flex-direction: column;
  background: #fff;
  color: #333;
  border-radius: 6px;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  z-index: 100;
}

.success-tip {
  margin: 16px 0 25px;
  font-size: 0.16rem;
}

.success-money {
  font-weight: bold;
  font-size: 0.18rem;
}

.success-btn {
  width: 100%;
  margin: 20px 0 0;
  padding: 10px 0;
  border-top: 1px solid #ddd;
  color: #00d18b;
  user-select: none;
}

.success-btn:active {
  background: #f4f4f4;
}

@keyframes loadingAni {
  0% {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
  }
}
</style>
